<template>
  <div>
    <el-dialog title="提示" :visible.sync="editdialog" width="50%" :before-close="handleClose">
      <el-form ref="editform" :model="edituserForm" status-icon :rules="editrules" label-width="70px">
        <el-form-item label="用户名">
          <el-input v-model="edituserForm.username" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="edituserForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="edituserForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeedit">取 消</el-button>
        <el-button type="primary" @click="submitForm('editform')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { putedituser } from '@/api'
export default {
  data() {
    const validateEmail = (rule, value, callback) => {
      // console.log(value)
      if (value === '') {
        callback(new Error('请输入邮箱'))
      } else {
        const reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-])+/
        if (reg.test(value)) {
          // this.$refs.ruleForm2.validateField('checkPass')
          callback()
        } else {
          callback(new Error('邮箱输入不正确'))
        }
      }
    }
    const validatePhone = (rule, value, callback) => {
      // console.log(value)
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else {
        const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/

        if (reg.test(value)) {
          // this.$refs.ruleForm2.validateField('checkPass')
          callback()
        } else {
          callback(new Error('手机号输入不正确'))
        }
      }
    }
    return {
      editrules: {
        email: [{ required: true, validator: validateEmail, trigger: 'change' }],
        mobile: [{ required: true, validator: validatePhone, trigger: 'change' }]
      }
    }
  },
  computed: {
    ...mapState({
      editdialog: state => state.Users.editdialog,
      edituserForm: state => state.Users.edituserForm
    })
  },
  methods: {
    ...mapMutations(['changeeditdialog', 'getusermenu']),
    closeedit() {
      // this.$refs.editform.resetFields()
      // this.changeeditdialog(false)
      this.closeDialog()
    },
    closeDialog() {
      this.$refs.editform.resetFields()
      this.changeeditdialog(false)
    },
    async sendedit() {
      const { data: res } = await putedituser(this.edituserForm.id, { email: this.edituserForm.email, mobile: this.edituserForm.mobile })
      if (res.meta.status === 200) {
        this.$message.success(res.meta.msg)
        this.getusermenu()
      } else {
        this.$message.error(res.meta.msg)
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // alert('submit!')
          this.sendedit()
          this.closeDialog()
        } else {
          // console.log('error submit!!')
          this.$message.error('请输入完整且正确的信息')
          return false
        }
      })
    },
    handleClose() {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.closeDialog()
        })
        .catch(_ => {})
    }
  }
}
</script>

<style></style>
